<script setup lang="ts">
import {projectPage} from "@/pages/project/projectManagement/index.js";
import {useUserStore} from "@/pinia/stores/user";
import {getFundingList} from "@/pages/funding/index.js";
import {getCommentsList} from "@/pages/outcomes/index.js";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import {ElConfigProvider} from "element-plus";

const userData = useUserStore().userInfo;
const tableData = ref('')
const tableSubmit = ref('')
const tableApplication = ref('')
const tableComments = ref('')
const applicationLength = ref(0)
const submitLength = ref(0)
const createLength = ref(0)
const projectIds = ref('')
const supportSum = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const loadingSubmit = ref(false)
const loadingCreate = ref(false)
const loadingApplication = ref(false)
const loadingComments = ref(false)
const handleSizeChange = (val) => {
  pageSize.value = val;
  getCommentsData();
}
const handleCurrentChange = (val) => {
  pageNum.value = val;
  getCommentsData();
}
const projiectData = async (data) => {
  let response = await projectPage(data, 9999, 1);
  return response.data.records;
}
const projiectCreate = async () => {
  loadingCreate.value = true;
  await projiectData({userId: userData.id}).then((res) => {
    tableData.value = res;
    createLength.value = tableData.value.filter(item => item.status === 1).length
    projectIds.value = tableData.value.map(item => item.id)
    if (projectIds.value.length > 0){
      getCommentsData();
    }
  }).finally(() => {
    loadingCreate.value = false;
  })
}
const projiectSubmit = async () => {
  loadingSubmit.value = true;
  await projiectData({username: userData.realName, isSubmit: 1}).then(data=>{
    tableSubmit.value = data;
    submitLength.value = tableSubmit.value.filter(item => item.isSubmit === 1).length
  }).finally(() => {
    loadingSubmit.value = false;
  })

}
const projiectApplication = async () => {
  loadingApplication.value = true;
  let data = await getFundingList({userId: 1}).then(data=>{
    tableApplication.value = data.data.records;
    applicationLength.value = tableApplication.value.filter(item => item.status === 1).length
  }).finally(() => {
    loadingApplication.value = false;
  })
}

const getCommentsData = async () => {
  loadingComments.value = true;
  if (projectIds.value.length === 0){
    loadingComments.value = false;
    return;
  }
  await getCommentsList({projectIds: projectIds.value,
    pageNum: pageNum.value, pageSize: pageSize.value}).then(data=>{
    tableComments.value = data.data.records;
    total.value = data.data.total;
    supportSum.value = tableComments.value.reduce((pre, cur) => pre + cur.support, 0)
  }).finally(() => {
    loadingComments.value = false;
  });
}

onMounted(() => {
  projiectCreate()
  projiectSubmit()
  projiectApplication()
})
</script>

<template>
  <el-col style="width: 99%;margin: 10px 10px 10px 10px;">
    <el-card style="margin-right: 10px">
      <div style="display: flex;">
        <h3>项目创建</h3>
        <el-tag style="margin-left: 10%" type="primary">创建数量 {{ tableData.length }}</el-tag>
        <el-tag style="margin-left: 10%" type="success">审核通过 {{ createLength }}</el-tag>
      </div>
      <el-table v-loading="loadingCreate" :data="tableData" style="width: 100%;margin-bottom: 20px" fit>
        <template #empty>
          <el-empty :image-size="120"></el-empty>
        </template>
        <el-table-column prop="title" label="项目名称" min-width="15%"/>
        <el-table-column prop="username" label="项目发起人" min-width="18%"/>
        <el-table-column prop="protype" label="项目类型" min-width="18%"/>
        <el-table-column prop="menber" label="项目成员" min-width="22%"/>
        <el-table-column prop="createTime" label="创建时间" min-width="18%"/>
        <el-table-column prop="instructor" label="指导老师" min-width="18%"/>
      </el-table>
      <div style="display: flex;">
        <h3>项目提交</h3>
        <el-tag style="margin-left: 10%" type="primary">提交数量 {{ tableSubmit.length }}</el-tag>
        <el-tag style="margin-left: 10%" type="success">提交通过 {{ submitLength }}</el-tag>
      </div>
      <el-table v-loading="loadingSubmit" :data="tableSubmit" style="width: 100%;margin-bottom: 20px" fit>
        <template #empty>
          <el-empty :image-size="120"></el-empty>
        </template>
        <el-table-column prop="title" label="项目名称" min-width="15%"/>
        <el-table-column prop="username" label="项目发起人" min-width="18%"/>
        <el-table-column prop="protype" label="项目类型" min-width="18%"/>
        <el-table-column prop="menber" label="项目成员" min-width="22%"/>
        <el-table-column prop="createTime" label="创建时间" min-width="18%"/>
        <el-table-column prop="instructor" label="指导老师" min-width="18%"/>
      </el-table>
      <div style="display: flex;">
        <h3>项目申请</h3>
        <el-tag style="margin-left: 10%" type="primary">申请数量 {{ tableApplication.length }}</el-tag>
        <el-tag style="margin-left: 10%" type="success">申请通过 {{ applicationLength }}</el-tag>
      </div>
      <el-table v-loading="loadingApplication" :data="tableApplication" style="width: 100%;margin-bottom: 20px" fit>
        <template #empty>
          <el-empty :image-size="120"></el-empty>
        </template>
        <el-table-column prop="projectName" label="项目名称" min-width="15%"/>
        <el-table-column prop="username" label="项目发起人" min-width="18%"/>
        <el-table-column prop="projectType" label="项目类型" min-width="18%"/>
        <el-table-column prop="reviewer" label="审核人" min-width="15%"/>
        <el-table-column prop="instructor" label="指导老师" min-width="18%"/>
        <el-table-column prop="funding" label="资金金额/万元" min-width="12%"/>
        <el-table-column prop="createTime" label="审核时间" min-width="18%"/>
      </el-table>
      <div style="display: flex;">
        <h3>项目评论</h3>
        <el-tag style="margin-left: 10%" type="primary">评论数量 {{ tableComments.length }}</el-tag>
        <el-tag style="margin-left: 10%" type="success">点赞总数 {{ supportSum }}</el-tag>
      </div>
      <div>
        <el-table v-loading="loadingComments" :data="tableComments" style="width: 100%;margin-bottom: 20px" fit>
          <template #empty>
            <el-empty :image-size="120"></el-empty>
          </template>
          <el-table-column label="序号" min-width="12%">
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="busername" label="评论人" min-width="15%"/>
          <el-table-column label="评论人头像" min-width="22%">
            <template v-slot="scope">
              <el-avatar :size="40" :src="scope.row.buserImg"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评论内容" min-width="30%"/>
          <el-table-column prop="support" label="点赞数" min-width="18%"/>
          <el-table-column prop="createTime" label="创建时间" min-width="18%"/>
        </el-table>
        <el-config-provider :locale="zhCn">
          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 15, 20]"
              size="default"
              background
              layout="total, sizes,prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </el-card>
  </el-col>
</template>

<style scoped lang="scss">

</style>
